<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单个班级的情况</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <link href="/css/myLayUI.css">
    <style>
        .box{
            /*width: 200px;*/
            /*height: 200px;*/
        }
        .bg-1{
            background-color: #F04949;
        }
        .bg-2{
            background-color: #104949;
        }
        .bg-3{
            background-color: #a04949;
        }
        .bg-4{
            background-color: #00F7DE;
        }

        body {
            color: #595959;
            background-color: #f0f2f5;
        }
    </style>
</head>
<body>
    <!--
    班级编号，班级名称。任教老师，班级人数。
    -->
<!--    <h1>单个班级的情况</h1>-->

    <!--单个科目的男女分数比例。
        只需要选择哪个科目即可显示。初始化是不显示科目。
    -->
    <!--主修-->
    <!--选修-->

    <!---->

    <!--布局-->
    <!--选择班级-->
<!--    <div class="layui-header" style="height: 20vh; background-color: #00F7DE">-->
    <!--固定在顶部-->
<!--    <div class="layui-header" style=" top: 1vh; position: fixed;">-->
    <div class="layui-header" style=" top: 1vh;">
        <div class="layui-fluid ew-console-wrapper">
            <!--班级-->
            <button class="layui-btn" id="className" style="margin-top: 2vh; margin-left: 10vw">
                <span>请选择班级</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </div>

    <div class="layui-body" style="left: 0; top: 2vh;" hidden>
        <!--班级的数据显示-->
        <div class="layui-fluid ew-console-wrapper">
            <!-- 一行 -->
            <div class="layui-row layui-col-space15">
                <!-- 一列 -->
                <!-- 男 - 女 各科 | 最高分对比情况 模块-->
                <div class="layui-col-lg8 layui-col-md8">
                    <!--男 - 女 各科 | 最高分对比情况-->
                    <div class="layui-card">
                        <div class="layui-card-header">男 - 女 最高分</div>
                        <div class="layui-card-body">
                            <div id="ECharts00" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>
                <!--该班级上的男女比例情况-->
                <div class="layui-col-lg4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">男女比例 - 饼图</div>
                        <div class="layui-card-body">
                            <div id="ECharts01" style="min-height: 220px; height: 60vh"></div>
                            <!--<div class="layui-row">
                                <div class="layui-card">
                                    <div class="layui-card-body">
                                        <div id="ECharts00" style="min-height: 220px;"></div>
                                    </div>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>

                <!-- 男 - 女 各科 | 最低分对比情况 模块-->
                <div class="layui-col-lg8 layui-col-md8">
                    <!--男 - 女 各科 | 最低分对比情况-->
                    <div class="layui-card">
                        <div class="layui-card-header">男 - 女 最低分</div>
                        <div class="layui-card-body">
                            <div id="ECharts02" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>
                <!--该班级上的男女比例情况-->
                <div class="layui-col-lg4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">男女比例 - 饼图</div>
                        <div class="layui-card-body">
                            <div id="ECharts03" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>

                <!--查看该班级上的每科成绩的学生的分数 【只有学号】-->
                <div  class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">学号 - 科目 分数 关系图</div>
                        <div class="layui-card-body">
                            <div id="ECharts04" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>

                <!--根据 GPA 进行学生学号的情况显示-->
                <div  class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">学号 - GPA 关系图  -- 【MAX GPA 4.3】</div>
                        <div class="layui-card-body">
                            <div id="ECharts05" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>

                <!--及格率、及格人数百分比-->
                <!--及格率 条形图-->
                <div  class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">及格率 人数统计图</div>
                        <div class="layui-card-body">
                            <div id="ECharts06" style="min-height: 220px; height: 90vh"></div>
                        </div>
                    </div>
                </div>


                <!--各个科目的通过情况-->
                <div  class="layui-col-lg8 layui-col-md8">
                    <div class="layui-card">
                        <div class="layui-card-header">科目通过情况</div>
                        <div class="layui-card-body">
                            <div id="ECharts07" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>
                <!--总分最高的10位同学-->
                <div  class="layui-col-lg4 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">前10位同学的总分</div>
                        <div class="layui-card-body">
                            <div id="ECharts08" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>

                <!--及格率 饼状显示 -->
                <div  class="layui-col-lg6 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">及格率 - 饼图</div>
                        <div class="layui-card-body">
                            <div id="ECharts09" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>
                <!--及格率 饼状显示 -->
                <div  class="layui-col-lg6 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">考勤情况</div>
                        <div class="layui-card-body">
                            <div id="ECharts10" style="min-height: 220px; height: 60vh"></div>
                        </div>
                    </div>
                </div>

                <!--数据表格-->
                <div  class="layui-col-lg12 layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--表格的标记-->
<!--                            <table class="layui-hide" id="student-score-table"></table>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-alpha.1/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<!--    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
    <!--服务器路径配置-->
    <script src="/js/myWebConfig.js"></script>
    <!--恢复异步执行-->
    <script>
        $.ajaxSettings.async = true;   //恢复异步执行
    </script>
    <!--初始化页面。可视化数据部分-->
    <script>

        let option00 ={};
        let option01 ={};
        let option02 ={};
        let option03 ={};
        let option04 ={};
        let option05 ={};
        let option06 ={};
        let option07 ={};
        let option08 ={};
        let option09 ={};
        let option10 ={};

        /**
         * 各个视图的数据部分
         */
        let option00Data = []
        let option01Data = []
        let option02Data = []
        let option03Data = []   // option01Data 与 option03Data 数据指向相同
        // 科目列表。学号列表。数据部分。
        let option04Data = {subjectList:[],stuIdList:[],data:[]}
        // 学号。GPA。
        let option05Data = {stuIdList:option04Data.stuIdList, GPA:[]}
        // [ 科目、优秀人数、良好人数、及格人数、不及格人数 ]。
        let option06Data = []
        // 科目、总人数、及格人数。
        let option07Data = {subjectList:[],totalList:[],passList:[]}
        // 姓名列表、总分。【排序：低 --> 高】
        let option08Data = {stuNameList:[], totalList:[]}
        // 及格率表格。
        let option09Data = [
            {value: 1048, name: '不及格'},
            {value: 735, name: '及格'},
            {value: 1048, name: '良好'},
            {value: 735, name: '优秀'}
        ]
        // 考勤状态表格
        let option10Data = [

            { value: 310, name: '优秀' },
            { value: 310, name: '安全' },
            { value: 251, name: '良好' },
            { value: 147, name: '警示' },
            { value: 102, name: '严重警示' }
        ]

        /**
         * 页面初始化。
         */
        function initPage() {

            /**
             * 科目与男女比例    最高分 --- 条形图。
             * 数据部分：option00.dataset.source[i]['科目名称',男生人数，女生人数]
             */
            // 男 - 女 最高分 对比表
            option00 = {
                // title: {
                //     text: '男 - 女 最高分',
                //     subtext: '',
                //     left: 'left'
                // },
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '男', '女'],
                    source: option00Data,
                    /*source: [
                        // {product: '高等数学', '男': 43.3, '女': 85.8, 2017: 93.7},
                        // {product: '思想政治', '男': 83.1, '女': 73.4, 2017: 55.1},
                        // {product: 'java程序设计', '男': 86.4, '女': 65.2, 2017: 82.5},
                        // {product: 'java编程思想', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: 'Linux系统运维', '男': 83.1, '女': 73.4, 2017: 55.1},
                        // {product: '教你如何拐跑别人家媳妇', '男': 86.4, '女': 65.2, 2017: 82.5},
                        // {product: 'java核心技术卷1', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: 'java核心技术卷2', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: '小灰漫画算法', '男': 83.1, '女': 73.4, 2017: 55.1}


                        ['高等数学', 43.3, 85.8],
                        ['思想政治', 83.1, 73.4],
                        ['java程序设计', 86.4, 65.2],
                        ['java编程思想', 72.4, 53.9],
                        ['Linux系统运维', 83.1, 73.4],
                        ['教你如何拐跑别人家媳妇', 86.4, 65.2],
                        ['java核心技术卷1', 72.4, 53.9],
                        ['java核心技术卷2', 72.4, 53.9],
                        ['小灰漫画算法', 83.1, 73.4]
                    ]*/
                },
                // xAxis: { type: 'category' },
                // yAxis: {},
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value'
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{type: 'bar'}, {type: 'bar'}]
            };
            // let ECharts00 = echarts.init(document.getElementById('ECharts00'));
            // ECharts00.setOption(option00);
            drawDiagrams(option00,'ECharts00',false);
            /**
             * 男女比例   ---  饼图。
             * 数据部分：option01.series[0].data[i].value    人数。（.name   性别）
             */
            /*男女比例  饼图*/
            option01 = {
                // title: {
                //     text: '男女比例 - 饼图',
                //     subtext: '',
                //     left: 'left'
                // },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'center'
                },
                series: [
                    {
                        name: '男女比例',
                        type: 'pie',
                        radius: '50%',
                        color: ['#5470c6', '#91cc75'],
                        /*数据部分*/
                        data: option01Data,
                        /*data: [
                            {value: 1048, name: '男'},
                            {value: 735, name: '女'}
                        ],*/
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // var ECharts01 = echarts.init(document.getElementById('ECharts01'), 'dark');
            // let ECharts01 = echarts.init(document.getElementById('ECharts01'));
            // ECharts01.setOption(option01);
            drawDiagrams(option01,'ECharts01',false);



            /**
             * 科目与男女比例     最低分   ---    条形图
             * 数据部分：option02.dataset.source[i]['科目名称',男生人数，女生人数]
             */
            // 男 - 女 最低分 对比表
            option02 = {
                // title: {
                //     text: '男 - 女 最低分',
                //     subtext: '',
                //     left: 'left'
                // },
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '男', '女'],
                    source: option02Data,
                    /*source: [

                        // {product: '高等数学', '男': 43.3, '女': 85.8, 2017: 93.7},
                        // {product: '思想政治', '男': 83.1, '女': 73.4, 2017: 55.1},
                        // {product: 'java程序设计', '男': 86.4, '女': 65.2, 2017: 82.5},
                        // {product: 'java编程思想', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: 'Linux系统运维', '男': 83.1, '女': 73.4, 2017: 55.1},
                        // {product: '教你如何拐跑别人家媳妇', '男': 86.4, '女': 65.2, 2017: 82.5},
                        // {product: 'java核心技术卷1', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: 'java核心技术卷2', '男': 72.4, '女': 53.9, 2017: 39.1},
                        // {product: '小灰漫画算法', '男': 83.1, '女': 73.4, 2017: 55.1}


                        ['高等数学', 43.3, 85.8],
                        ['思想政治', 83.1, 73.4],
                        ['java程序设计', 86.4, 65.2],
                        ['java编程思想', 72.4, 53.9],
                        ['Linux系统运维', 83.1, 73.4],
                        ['教你如何拐跑别人家媳妇', 86.4, 65.2],
                        ['java核心技术卷1', 72.4, 53.9],
                        ['java核心技术卷2', 72.4, 53.9],
                        ['小灰漫画算法', 83.1, 73.4]
                    ]*/
                },
                // xAxis: { type: 'category' },
                // yAxis: {},
                xAxis: {
                    type: 'category',
                },
                yAxis: {
                    type: 'value'
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{type: 'bar'}, {type: 'bar'}]
            };
            // let ECharts02 = echarts.init(document.getElementById('ECharts02'));
            // ECharts02.setOption(option02);
            drawDiagrams(option02,'ECharts02',false);
            /*男女比例  饼图*/
            // let ECharts03 = echarts.init(document.getElementById('ECharts03'));
            // ECharts03.setOption(option01);
            drawDiagrams(option01,'ECharts03',false);



            /**
             * 成绩总情况 --- 折线图
             * 科目名：         option04.legend.data []
             * 学号：          option04.xAxis.data []
             * 数据部分：
             *      科目名：    option04.series[i].name
             *      该科目所对应的学生学号的分数：option04.series[i].data  []
             */
            /*一个班级内的学生成绩总情况查询*/
            option04 = {
                // title: {
                //     text: '学号 - 科目 分数 关系图'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // 科目列表
                    data: option04Data.subjectList,
                    // data: ['高等数学', '思想政治', 'java程序设计', 'java编程思想', 'java核心技术卷1']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['stack', 'tiled'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    name:'学号',
                    type: 'category',
                    boundaryGap: false,
                    // 学号
                    data: option04Data.stuIdList,
                    /*data:
                        ['1', '2', '3', '4', '5', '6', '7','8','9','10',
                            '20','21', '22', '23', '24', '25', '26', '27','28','29',
                            '30','31', '32', '33', '34', '35', '36', '37','38','39',
                            '40','41', '42', '43', '44', '45', '46', '47','48','49',
                            '50','51', '52', '53', '54', '55', '56', '57','58','59',
                            '60','61', '62', '63', '64', '65', '66', '67','68','69',
                        ]
                    */
                },
                yAxis: {
                    name:'分数',
                    type: 'value',
                    show: false
                },
                series: option04Data.data,
                /*series: [
                    {
                        name: '高等数学',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                        ]
                    },
                    {
                        name: '思想政治',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                            220, 182, 191, 234, 290, 330, 310,220, 182, 191,
                            234, 290, 330, 310, 290, 330, 310,220, 182, 191,
                        ]
                    },
                    {
                        name: 'java程序设计',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                            150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154,
                        ]
                    },
                    {
                        name: 'java编程思想',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                            320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                            320, 332, 301, 334, 390, 330, 320, 320, 332, 301,
                            334, 390, 330, 320, 390, 330, 320, 320, 332, 301,
                        ]
                    },
                    {
                        name: 'java核心技术卷1',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901,
                            820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901,
                            934, 1290, 1330, 1320, 1290, 1330, 1320, 820, 932, 901, ]
                    }
                ]*/
            };
            // let ECharts04 = echarts.init(document.getElementById('ECharts04'));
            // ECharts04.setOption(option04);
            drawDiagrams(option04,'ECharts04',false);



            /**
             * GPA情况   ---   折线图
             * 学号：          option05.xAxis.data         []
             * 学生GPA情况：    option05.series[0].data     []
             */
            /*根据 GPA 进行学生学号的情况显示*/
            option05 = {
                // title: {
                //     text: '学号 - GPA 关系图'
                // },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['GPA']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['stack', 'tiled'] },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: {
                    name: '学号',
                    type: 'category',
                    boundaryGap: false,
                    data: option05Data.stuIdList,
                    /*data:
                        ['1', '2', '3', '4', '5', '6', '7','8','9','10',
                            '20','21', '22', '23', '24', '25', '26', '27','28','29',
                            '30','31', '32', '33', '34', '35', '36', '37','38','39',
                            '40','41', '42', '43', '44', '45', '46', '47','48','49',
                            '50','51', '52', '53', '54', '55', '56', '57','58','59',
                            '60','61', '62', '63', '64', '65', '66', '67','68','69',
                        ]*/
                },
                yAxis: {
                    name: 'GPA',
                    type: 'value'
                },
                series: [
                    {
                        name: 'GPA',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        data: option05Data.GPA,
                        /*data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                            134, 90, 230, 210, 120, 132, 101, 134, 90, 230,
                            210, 120, 132, 101, 134, 90, 230, 210, 90, 230,
                        ]*/
                    },
                ]
            };
            // let ECharts05 = echarts.init(document.getElementById('ECharts05'));
            // ECharts05.setOption(option05);
            drawDiagrams(option05,'ECharts05',false);



            /**
             * 及格率人数统计图  --- 条形图
             * 数据部分：option06.dataset.source[i] ['高等数学','优秀人数','良好人数','及格人数','不及格人数']
             */
            /*及格率 条形图*/
            option06 = {
                // title: {
                //     text: '及格率 人数统计图',
                //     subtext: '',
                //     left: 'left'
                // },
                legend: {},
                tooltip: {},
                dataset: {
                    dimensions: ['product', '优秀≥90', '良好≥75', '及格≥60','不及格<60'],
                    source: option06Data,
                    /*source: [
                        // {product: '高等数学', '优秀': 43.3, '良好': 85.8, '及格': 93.7, '不及格': 93.7},
                        // {product: '思想政治', '优秀': 83.1, '良好': 73.4, "及格": 55.1, "不及格": 55.1},
                        // {product: 'java程序设计', '优秀': 86.4, '良好': 65.2, "及格": 82.5, "不及格": 82.5},
                        // {product: 'java编程思想', '优秀': 72.4, '良好': 53.9, "及格": 39.1, "不及格": 39.1},
                        // {product: 'Linux系统运维', '优秀': 83.1, '良好': 73.4, "及格": 55.1, "不及格": 55.1},
                        // {product: '教你如何拐跑别人家媳妇', '优秀': 86.4, '良好': 65.2, "及格": 82.5, "不及格": 82.5},
                        // {product: 'java核心技术卷1', '优秀': 72.4, '良好': 53.9, "及格": 39.1, "不及格": 39.1},
                        // {product: 'java核心技术卷2', '优秀': 72.4, '良好': 53.9, "及格": 39.1, "不及格": 39.1},
                        // {product: '小灰漫画算法', '优秀': 83.1, '良好': 73.4, "及格": 55., "不及格": 55.1}

                        ['高等数学',            43.3, 85.8, 93.7, 93.7],
                        ['思想政治',            83.1, 73.4, 55.1, 55.1],
                        ['java程序设计',        86.4, 65.2, 82.5, 82.5],
                        ['java编程思想',        72.4, 53.9, 39.1, 39.1],
                        ['Linux系统运维',       83.1, 73.4, 55.1, 55.1],
                        ['教你如何拐跑别人家媳妇', 86.4, 65.2, 82.5, 82.5],
                        ['java核心技术卷1',      72.4, 53.9, 39.1, 39.1],
                        ['java核心技术卷2',      72.4, 53.9, 39.1, 39.1],
                        ['小灰漫画算法',         83.1, 73.4, 55., 55.1]

                    ]*/
                },
                xAxis: { type: 'category' },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            // let ECharts06 = echarts.init(document.getElementById('ECharts06'));
            // ECharts06.setOption(option06);
            drawDiagrams(option06,'ECharts06',false);


            /*各个科目的及格情况*/

            /*
             * 数据部分：
             * 科目数据：     option07.yAxis[0].data。
             * 该科目总人数：  seriesData1
             * 该科目通过人数：seriesData2
             *
             */
            /**
             * 如需扩展科目数，则需要修改。
             * legendData。seriesData1。seriesData2。这三个变量。
             */
                // 科目通过人数比例
            // let legendData = ['高等数学', '思想政治', '教你如何拐跑别人家媳妇', 'java编程思想', 'java核心技术卷1',
            //                   'java核心技术卷2', '小灰漫画算法', '直男是如何炼成的', 'java设计模式', 'spring实战']
            let legendData = option07Data.subjectList
            // let legendData = []
            // 预约数
            // 科目总人数
            // var seriesData1 = [400, 400, 434, 231, 112, 140, 256, 341, 97,100]
            var seriesData1 = option07Data.totalList
            // 已考试数
            // 及格人数
            // var seriesData2 = [200, 200, 200, 150, 100, 40, 210, 82, 62,65]
            var seriesData2 = option07Data.passList
            // 计算百分比
            let seriesData3 = []
            let seriesData4 = []
            for (let i in seriesData1) {
                // 百分比计算
                seriesData3.push(Math.round(seriesData2[i] / seriesData1[i] * 10000) / 100)
                seriesData4.push(100)
            }
            var option07 = {
                // title: {
                //     text: '科目通过情况'
                // },
                grid: {
                    left: 230,
                    // top: 0,
                    bottom: 0,
                    right: 80
                },
                yAxis: [{
                    type: 'category',
                    data: legendData,
                    axisPointer: {
                        type: 'line'
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            fontSize: 14,
                        },
                        //百分比存储方法
                        formatter: function (value, index) {
                            let res = '{grey|' + value + '}{blue|' + seriesData3[index] + '%}';
                            return res;
                        },
                        rich: {
                            blue: {
                                color: '#6bb6fd',
                                width: 60,
                                align: 'right',
                            },
                            grey: {
                                color: '#adb1b3'
                            }
                        }
                    },
                }],
                xAxis: [{
                    min: 0,
                    max: 100,
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    type: 'bar',
                    data: seriesData3,  /*计算百分比*/
                    barWidth: '12px',
                    z: 100,
                    itemStyle: {
                        normal: {
                            color: '#2c96f8',
                            barBorderRadius: [10, 10, 10, 10],
                        }
                    }
                },
                    {
                        name: '进度条背景',
                        type: 'bar',
                        barGap: '-100%',
                        data: seriesData4,
                        barWidth: 12,
                        // 进度条背景颜色
                        itemStyle: {
                            barBorderRadius: [10, 10, 10, 10],
                            color: '#f7b534'
                        },
                        z: 90,
                        yAxisIndex: 0,
                        xAxisIndex: 0,
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                distance: 10,
                                // 通过人数比例的颜色
                                color: '#6bb6fd',
                                formatter: function (params) {
                                    let res = '{blue|' + seriesData2[params.dataIndex] + '/}{orange|' + seriesData1[params.dataIndex] + '}';
                                    return res;
                                },
                                rich: {
                                    blue: {
                                        color: '#6bb6fd'
                                    },
                                    orange: {
                                        color: '#f7b534'
                                    }
                                }
                            }
                        }
                    }
                ]
            };
            // var ECharts07 = echarts.init(document.getElementById('ECharts07'));
            // ECharts07.setOption(option07);
            drawDiagrams(option07,'ECharts07',false);

            /**
             * 总分前10位学生
             *
             * 姓名：  option08.yAxis.data         []
             * 分数：  option08.series[0].data     []
             */
            /*总分前10位同学*/
            option08 = {
                // title: {
                //     text: '前10位同学的总分'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',

                    data: option08Data.stuNameList,
                    // 低 --> 高
                    // data: ['杏一','小二', '张三', '李四', '王五', '赵六', '田七','宋八','刘九','戊十']
                },
                series: [
                    {
                        name: '总分',
                        type: 'bar',
                        // 低 --> 高
                        data: option08Data.totalList,
                        // data: [56, 86, 88, 99, 64,
                        //     55, 56, 86, 88, 99]
                    },
                    // {
                    //   name: '2012',
                    //   type: 'bar',
                    //   data: [19325, 23438, 31000, 121594, 134141, 681817]
                    // }
                ]
            };
            // let ECharts08 = echarts.init(document.getElementById('ECharts08'));
            // ECharts08.setOption(option08);
            drawDiagrams(option08,'ECharts08',false);

            /**
             * 及格率  --- 饼图
             * 数据部分：    option09.series[0].data[i] [value:及格状态的人数, 及格状态]
             */
            /*及格率 饼图*/
            option09 = {
                // title: {
                //     text: '及格率 - 饼图',
                //     subtext: '',
                //     left: 'left'
                // },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    // left: 'right',
                    x: 'center',
                    y: 'bottom',
                },
                series: [
                    {
                        name: '及格率',
                        type: 'pie',
                        radius: '50%',
                        // color: ['#5470c6', '#91cc75'],
                        color: ['#ee6666', '#fac858', '#73c0de', '#5470c6'],
                        // color: ['#5470c6', '#73c0de', '#fac858', '#ee6666',
                        //     '#73c0de', '#3ba272', '#fc8452', '#9a60b4',
                        //     '#ea7ccc'],
                        /*数据部分*/
                        data: option09Data,
                        /*data: [
                            {value: 1048, name: '不及格'},
                            {value: 735, name: '及格'},
                            {value: 1048, name: '良好'},
                            {value: 735, name: '优秀'}
                        ],*/
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            // let ECharts09 = echarts.init(document.getElementById('ECharts09'));
            // ECharts09.setOption(option09);
            drawDiagrams(option09,'ECharts09',false);

            /*考勤情况 饼图*/

            /*
             * 数据部分：
             *  提示信息数据：  option10.legend.data。
             *  班级数据：     option10.series[0].name。  // 动态的班级信息。
             *  浮块数据：     option10.series[0].data。
             *
             *  提示信息数据：  option10.series[0].data[i].name。
             *  信息数据：     option10.series[0].data[i].value。
             */
            option10 = {
                // title: {
                //     text: '考勤情况',
                //     subtext: '',
                //     left: 'left'
                // },
                color: ['#327bfa', '#35b1fa', '#62d56b', '#ffb84f',
                    '#ff7a32'],
                //弹窗信息设置部分
                tooltip: {
                    trigger: 'item',
                    //弹窗信息
                    formatter: "{a}:{b} <br/>占比:{d}%<br/>"
                    // formatter: "{a}:{b} <br/>占比:{d}%<br/>点击查看详情->"
                },
                legend: {
                    show: true,
                    orient: 'horizontal',
                    x: 'center',
                    y: 'bottom',
                    //提示信息部分
                    data: ['优秀', '安全', '良好', '警示', '严重警示'],

                },
                grid: {
                    top: 'bottom',
                    left: '90',
                    width: '90%',
                    height: '80%',

                },
                //数据部分
                series: [
                    {
                        //班级
                        // name: '健康度22等级',
                        name: '',
                        // name: '19物联网应用技术B班',    // 动态获取班级情况。
                        type: 'pie',
                        selectedMode: 'single',
                        //内圆与外圆的大小
                        radius: ['30%', '55%'],
                        label: {
                            normal: {
                                formatter: '{b|{b}}',
                                rich: {
                                    b: {
                                        fontSize: 16,
                                        lineHeight: 30
                                    }

                                }
                            }
                        },
                        //数据部分
                        data: option10Data,
                        /*data: [

                            { value: 310, name: '优秀' },
                            { value: 310, name: '安全' },
                            { value: 251, name: '良好' },
                            { value: 147, name: '警示' },
                            { value: 102, name: '严重警示' }
                        ]*/
                    }
                ]
            };
            // let ECharts10 = echarts.init(document.getElementById('ECharts10'));
            // ECharts10.setOption(option10);
            drawDiagrams(option10,'ECharts10',false);
        }

        /**
         * 将 GPA 百分制转为 学分制 【采用 中科大4.3算法】
         *
         */
        function toGPA(score) {
            // 采用 中科大4.3算法，计算 GPA。

            // 成绩      学分

            // 100～95  4.3
            // 94～90   4.0
            // 89～85   3.7

            // 84～82   3.3
            // 81～78   3.0
            // 77～75   2.7

            // 74～72   2.3
            // 71～68   2.0
            // 67～65   1.7

            // 64～64   1.5
            // 63～61   1.3
            // 60～60   1.0

            // 59～0    0
            // console.log("分数：" + score)
            if (100>=score && score>=95){
                return 4.3
            }else if(score>=90){
                return 4.0
            }else if(score>=85){
                return 3.7
            }else if(score>=82){
                return 3.3
            }else if(score>=78){
                return 3.0
            }else if(score>=75){
                return 2.7
            }else if(score>=72){
                return 2.3
            }else if(score>=68){
                return 2.0
            }else if(score>=65){
                return 1.7
            }else if(score>=64){
                return 1.5
            }else if(score>=64){
                return 1.3
            }else if(score>=60){
                return 1.0
            }else if(score>=0){
                return 0
            }
        }

        /**
         * 绘制 表图，或者重建表图。
         *
         *      如果 isResize 为 false ==> 绘制表图。
         *      如果 isResize 为 true  ==> 重建表图。
         */
        function drawDiagrams(option,str,isResize) {
            // let ECharts04 = echarts.init(document.getElementById('ECharts04'));
            let ECharts = echarts.init(document.getElementById(str));

            // 如果不是重构，则显示。如果是重建，则重建。
            if (isResize == false){
                ECharts.setOption(option);
            }else if (isResize == true){
                ECharts.resize();
            }
        }

        /**
         * 快速排序算法（从小到大） 【左右闭区间】
         * @param arr       需要排序的数组。
         * @param arrIndex  需要进行排序的下标
         * @param arrName   需要进行排序的下标所对应的学生姓名
         * @param begin     需要排序的区间左边界
         * @param end       需要排序的区间的有边界
         *
         * 思路：两个哨兵，i,j,j从右边找比基数小的，i从左边找比基数大的，然后交换两个目标元素的位置，直到i=j,然后交换i和基数的位置，递归处理。
         */
        function quick_sort(arr,arrIndex,arrName,begin,end){
            // arr
            var i = begin; //哨兵i
            var j = end; //哨兵j
            var key = arr[begin]; //标准值

            // arrIndex
            var keyIndex = arrIndex[begin]; //标准值

            // arrName
            var keyName = arrName[begin]; //标准值

            if(begin >= end){ //如果数组只有一个元素
                return;
            }
            while(i < j){
                while(arr[j] > key && i < j){ //从右边向左找第一个比key小的数，找到或者两个哨兵相碰，跳出循环
                    j--;
                }
                while(arr[i] <= key && i < j){  //从左边向右找第一个比key大的数，找到或者两个哨兵相碰，跳出循环,这里的=号保证在本轮循环结束前，key的位置不变，否则的话跳出循环，交换i和begin的位置的时候，begin位置的上元素有可能不是key
                    i++;
                }
                /**
                 代码执行道这里，1、两个哨兵到找到了目标值。2、j哨兵找到了目标值。3、两个哨兵都没找到(key是当前数组最小值)
                 **/
                if(i < j){ //交换两个元素的位置
                    // arr
                    var temp = arr[i];
                    arr[i] = arr[j];
                    arr[j] = temp;

                    // arrIndex
                    var tempIndex = arrIndex[i];
                    arrIndex[i] = arrIndex[j];
                    arrIndex[j] = tempIndex;

                    // arrIndex
                    var tempName = arrName[i];
                    arrName[i] = arrName[j];
                    arrName[j] = tempName;
                }
            }
            arr[begin] = arr[i] //
            arr[i] = key;

            // arrIndex
            arrIndex[begin] = arrIndex[i]
            arrIndex[i] = keyIndex

            // arrName
            arrName[begin] = arrName[i]
            arrName[i] = keyName

            quick_sort(arr,arrIndex,arrName,begin,i-1);
            quick_sort(arr,arrIndex,arrName,i+1,end);
        }

        /**
         * 重绘表格
         */
        function drawDiagramsList(){
            // 表图响应式。
            drawDiagrams(option00,'ECharts00',true);
            drawDiagrams(option01,'ECharts01',true);
            drawDiagrams(option02,'ECharts02',true);
            drawDiagrams(option03,'ECharts03',true);
            drawDiagrams(option04,'ECharts04',true);
            drawDiagrams(option05,'ECharts05',true);
            drawDiagrams(option06,'ECharts06',true);
            drawDiagrams(option07,'ECharts07',true);
            drawDiagrams(option08,'ECharts08',true);
            drawDiagrams(option09,'ECharts09',true);
            drawDiagrams(option10,'ECharts10',true);
        }
        // 页面发生变化时触发。
        window.onresize = function () {
            console.log("页面改变了")

            drawDiagramsList()

            // // 表图响应式。
            // drawDiagrams(option00,'ECharts00',true);
            // drawDiagrams(option01,'ECharts01',true);
            // drawDiagrams(option02,'ECharts02',true);
            // drawDiagrams(option03,'ECharts03',true);
            // drawDiagrams(option04,'ECharts04',true);
            // drawDiagrams(option05,'ECharts05',true);
            // drawDiagrams(option06,'ECharts06',true);
            // drawDiagrams(option07,'ECharts07',true);
            // drawDiagrams(option08,'ECharts08',true);
            // drawDiagrams(option09,'ECharts09',true);
            // drawDiagrams(option10,'ECharts10',true);
        }
    </script>
    <!--初始化页面。表格部分-->
    <script>
        /**
         * 初始化表格。
         * @param classId 班级编号。要查询的班级。
         */
        function initTable(classId){
            layui.config({
                base: '/manageSystem/layui/extend/'      // 你存放新模块的目录，注意，不是 layui 的模块目录
            }).use(['table', 'element', 'form', 'dtree'], function () {
                // 表格
                var table = layui.table;

                // 表格数据函数【有表格数据，表格信息数据】
                // 备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作.
                table.render({
                    // id: 'testReload',   // 用于重载表单。
                    id: 'studentScoreReload',   // 用于重载表单。
                    elem: '#student-score-table',    //指定原始表格元素选择器（推荐id选择器）。在指定id后面添加一个动态表格
                    // 表格行数据来源
                    // 表格数据。【从服务器获取信息,】
                    // 包含的数据信息，有 表格信息，和总记录条数。
                    // 这里获取的是学生表信息，并不是根据班级获取学生信息
                    url: webUrl + studentsDataPrefix + "/classForOne/"+classId,
                    toolbar: '#toolbar',    // 点击“新增”会弹出来的动态页面。
                    page: true, //开启分页
                    loading: true,  // 显示加载
                    // 表头
                    cols: [ //表头
                        [
                            {type: 'checkbox'},
                            {type: 'numbers', title: '序号', width: 60},

                            // {field: 'studentId', title: subjectsList[0], align: 'center', minWidth: 150, sort: true},
                            // {field: 'studentName', title: subjectsList[1], align: 'center', minWidth: 100},
                            // {field: 'className', title:  subjectsList[2], align: 'center', minWidth: 200},
                            // {field: 'subjectsScore1', title:  subjectsList[3], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore2', title:  subjectsList[4], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore3', title:  subjectsList[5], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore4', title:  subjectsList[6], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore5', title:  subjectsList[7], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore6', title:  subjectsList[8], align: 'center', minWidth: 200, sort: true},
                            // {field: 'subjectsScore7', title:  subjectsList[9], align: 'center', minWidth: 200, sort: true},

                            {field: 'studentId', title: "学号", align: 'center', minWidth: 150, sort: true},
                            {field: 'studentName', title: "姓名", align: 'center', minWidth: 100},
                            {field: 'className', title:  "性别", align: 'center', minWidth: 200},
                            {field: 'subjectsScore1', title:  "班级", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore2', title:  "GPA", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore3', title:  "最高分", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore4', title:  "最低分", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore5', title:  "平均分", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore6', title:  "总分", align: 'center', minWidth: 200, sort: true},
                            {field: 'subjectsScore7', title:  "考勤情况", align: 'center', minWidth: 200, sort: true},


                            // {title: '操作', align: 'center', toolbar: '#column-toolbar', width: 120}
                        ]
                    ],
                    // 解决 limit 失效问题。
                    // 对回调的信息进行处理。
                    parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                        console.log("表格回调函数：")
                        console.log(res)
                        // console.log("长度：" + res.data.length)
                        for (let i = 0; i < res.data.length; i++) {
                        }
                        var result;
                        if (this.page.curr) {
                            result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                        } else {
                            result = res.data.slice(0, this.limit);
                        }
                        return {
                            "code": res.code,       //解析接口状态
                            "msg": res.msg,         //解析提示文本
                            "count": res.count,     //解析数据长度
                            "data": result          //解析数据列表
                        }
                    }
                });
            });
        }
    </script>
    <!--选择班级和科目-->
    <script>
        layui.use('dropdown', function(){
            var dropdown = layui.dropdown

            //选择班级
            dropdown.render({
                elem: '#className' //可绑定在任意元素中，此处以上述按钮为例
                , data: JSON.parse(window.sessionStorage.getItem("collegeInfo"))    // 在下拉列表中展示 学院信息。
                /*,data: [{
                    title: '人工智能学院'
                    ,id: 24
                    /!*子菜单*!/
                    ,child: [{
                        title: '物联网应用技术'
                        ,id: '01'
                        /!*子菜单*!/
                        ,child: [{
                            title: '2019'
                            ,id: 19
                            /!*子菜单*!/
                            ,child: [{
                                title: '2019级物联网应用技术A班'
                                ,id: '192401'
                            },{
                                title: '2019级物联网应用技术B班'
                                ,id: '192402'
                            },{
                                title: '2019级物联网应用技术C班'
                                ,id: '192403'
                            }]
                        },{
                            title: '2020'
                            ,id: 20
                            /!*子菜单*!/
                            ,child: [{
                                title: '2020级物联网应用技术A班'
                                ,id: '202401'
                            },{
                                title: '2020级物联网应用技术B班'
                                ,id: '202402'
                            },{
                                title: '2020级物联网应用技术C班'
                                ,id: '202403'
                            }]
                        },{
                            title: '2021'
                            ,id: 21
                            /!*子菜单*!/
                            ,child: [{
                                title: '2021级物联网应用技术A班'
                                ,id: '212401'
                            },{
                                title: '2021级物联网应用技术B班'
                                ,id: '212402'
                            },{
                                title: '2021级物联网应用技术C班'
                                ,id: '212403'
                            }]
                        }]
                    },{
                        title: '电子信息技术'
                        ,id: 52
                    }]
                }]*/
                ,id: 'className'
                //菜单被点击的事件
                ,click: function(obj){
                    console.log(obj);
                    // 专业号 和 班级号。
                    console.log(obj.id);
                    if (obj.id == "" || obj.id == undefined){
                        // 该班级没有数据。
                        layer.msg("选择的班级有误！", {icon: 0});
                        return ;
                    }
                    $.ajaxSettings.async = false;   //取消异步执行
                    // 发送请求到服务器。获取当前对象的 id 并查询该 id 的所有公共课程。
                    $.get(webUrl+studentsDataPrefix+"/classForOne/"+obj.id,function (res) {
                        console.log("class-for-one 回传的数据。")
                        // console.log(res)
                        let t1res = JSON.parse(res) // 转object。
                        console.log(t1res)

                        // 如果数据为 null
                        if (t1res.data.data != 0){
                            // 数据获取之后，
                            // 最高分
                            let maleMaxScore = -1
                            // 最低分
                            let maleMinScore = 100

                            // 女生最高分
                            let femaleMaxScore = -1
                            // 女生最低分
                            let femaleMinScore = 100


                            // 男生人数
                            let male = 0
                            // 女生人数
                            let female = 0
                            // 总人数。【后面会用到】
                            let total = 0


                            // 科目 和 学分
                            let courseList =  t1res.data.courseList
                            let courseListForOption04Data = []


                            // 临时存放学号
                            let tempStuId = ""

                            // 获取数据
                            let showData = t1res.data.data

                            // 科目和边界分数 {courseName:'科目名称',
                            // maleMaxScore:'男最高分',maleMinScore:'男最低分',
                            // femaleMaxScore:'女最高分',femaleMinScore:'女最低分'}
                            let scoreList = []

                            // 判断男女人数
                            for (let i = 0; i < showData.length; i++) { // 男女人数

                                // 通过学号去判断是否是同一个人。
                                if (showData[i].studentId != tempStuId) {
                                    // 获取 男女人数。
                                    (showData[i].gender == 1) ? male++ : female++;
                                    tempStuId = showData[i].studentId
                                    // 计算总人数
                                    total++
                                }
                            }

                            // 获取某个科目最高分和最低分
                            for (let i = 0; i < courseList.length; i++) {   // 科目

                                // 获取当前科目的最高分和最低分
                                for (let j = 0; j < showData.length; j++) { // 学生信息
                                    // console.log("当前分数：" + showData[j].subjectsScore)
                                    // 如果当前科目与当前学生的科目相同。
                                    if (courseList[i].courseName == showData[j].courseName){
                                        // console.log("当前科目：" + courseList[i].courseName)
                                        // console.log("当前分数：" + showData[j].courseName)
                                        // console.log("当前性别：" + showData[j].gender)

                                        // 男性边界分数
                                        if (showData[j].gender == 1){
                                            // 当前科目的最高分
                                            if (showData[j].subjectsScore > maleMaxScore){
                                                maleMaxScore = showData[j].subjectsScore
                                            }
                                            // 当前科目最低分
                                            if (showData[j].subjectsScore < maleMinScore){
                                                maleMinScore = showData[j].subjectsScore
                                            }
                                        }
                                        // 女性边界分数
                                        else if (showData[j].gender == 0 ){
                                            // 当前科目的最高分
                                            if (showData[j].subjectsScore > femaleMaxScore){
                                                femaleMaxScore = showData[j].subjectsScore
                                            }
                                            // 当前科目最低分
                                            if (showData[j].subjectsScore < femaleMinScore){
                                                femaleMinScore = showData[j].subjectsScore
                                            }
                                        }

                                        // 获取科目和学生分数
                                    }
                                }
                                // console.log("当前 科目 - 分数 情况")
                                // console.log("courseName --- "+courseList[i].courseName+" --- maleMaxScore："+maleMaxScore +" --- femaleMaxScore: "+femaleMaxScore)
                                // console.log("courseName -- "+courseList[i].courseName+" --- maleMinScore："+maleMinScore +" --- femaleMinScore: "+femaleMinScore)

                                // 进行分数赋值。
                                scoreList[i] = {
                                    courseName: courseList[i].courseName,
                                    maleMaxScore:maleMaxScore,
                                    maleMinScore:maleMinScore,
                                    femaleMaxScore:femaleMaxScore,
                                    femaleMinScore:femaleMinScore,
                                }
                            }

                            console.log("男女人数比例情况")
                            console.log("男："+male)
                            console.log("女："+female)

                            // console.log("当前科目与边界分数：")
                            // console.log(scoreList)

                            // 数据部分
                            for (let i = 0; i < courseList.length; i++) {
                                // 男 - 女 最高分
                                option00Data[i] = [scoreList[i].courseName,scoreList[i].maleMaxScore,scoreList[i].femaleMaxScore]
                                // 男 - 女 最低分
                                option02Data[i] = [scoreList[i].courseName,scoreList[i].maleMinScore,scoreList[i].femaleMinScore]

                                // 赋值科目列表。
                                courseListForOption04Data[i] = courseList[i].courseName
                            }
                            // 男女饼图
                            for (let i = 0; i < 2; i++) {
                                // 男左，女右
                                option01Data[i] = {value: i==1?female:male, name: i==1?'女':'男'}
                            }


                            // option04Data
                            // 科目列表 和 学分
                            option04Data.subjectList = courseListForOption04Data
                            // console.log("courseListForOption04Data: ")
                            // console.log(courseListForOption04Data)
                            // 学号
                            tempStuId = ""
                            // console.log("学号赋值：")
                            // 学号列表
                            for (let i=0,j = 0; j < showData.length; j++) {
                                // 当前学生的学号。
                                if (showData[j].studentId!=tempStuId){
                                    tempStuId = showData[j].studentId
                                    // console.log("学号：" + showData[j].studentId+"\t分数："+showData[j].subjectsScore)
                                    // console.log("学号：" + showData[j].studentId.substring(8))
                                    // 0开始，10个字符长度，取值8【即获取最后两个】。
                                    try {
                                        option04Data.stuIdList[i] = showData[j].studentId.substring(8)
                                    }catch (e) {

                                    }
                                    i++
                                }
                            }
                            // console.log(option04Data.stuIdList)
                            // 科目列表
                            for (let i = 0; i <courseList.length; i++) {
                                // console.log("当前科目：" + courseList[i].courseName)
                                option04Data.data[i] = {
                                    name: courseList[i].courseName,
                                    type: 'line',
                                    stack: 'Total',
                                    smooth: true,
                                    data: []
                                }

                                // 学号列表
                                for (let k=0,j = 0; j < showData.length; j++) {
                                    // 如果当前科目与当前学生的科目相同。
                                    if (courseList[i].courseName == showData[j].courseName){
                                        // 当前学生的学号。
                                        if (showData[j].studentId!=tempStuId){
                                            tempStuId = showData[j].studentId
                                            // console.log("学号：" + showData[j].studentId+"\t分数："+showData[j].subjectsScore)
                                            option04Data.data[i].data[k] = showData[j].subjectsScore
                                            k++
                                        }
                                    }
                                }
                            }


                            // option05Data
                            // 采用 中科大4.3算法，计算 GPA。

                            // 成绩      学分

                            // 100～95  4.3
                            // 94～90   4.0
                            // 89～85   3.7
                            // 84～82   3.3
                            // 81～78   3.0
                            // 77～75   2.7
                            // 74～72   2.3
                            // 71～68   2.0
                            // 67～65   1.7
                            // 64～64   1.5
                            // 63～61   1.3
                            // 60～60   1.0
                            // 59～0    0

                            // GPA计算公式：（成绩等级1*学分1+成绩等级2*学分2）/（学分1+学分2）
                            // 按照学生学号进行计算。
                            // option05Data.GPA[i] = 0

                            let 分子 = 0
                            let 分母 = 0
                            let GPA = -1
                            let thisStudentId = ""    // 当前学生

                            // 学生学号
                            let i = 0,j = 0,k = 0;
                            for (i = 0,j=0,k = 0; i < showData.length; i++,j++) {
                                // console.log("当前学生学号："+showData[i].studentId)
                                // 如果学号不相同，则说明是下一个学生。
                                if ( showData[i].studentId != thisStudentId ){
                                    // 计算当前学生的GPA。不为 NaN，即不是一开始的位置
                                    if (GPA !== -1){
                                        GPA = 分子/分母
                                        // option05Data.GPA[k++] = GPA.toFixed(2)
                                        option05Data.GPA[k++] = toGPA(GPA.toFixed(2))

                                        // 输出 GPA 保留两位小数，并进行四舍五入。
                                        // console.log("GPA : "+GPA.toFixed(2))
                                    }
                                    // 当前学生
                                    thisStudentId = showData[i].studentId
                                    // console.log("--------------------------------")
                                    // console.log("\n当前学生学号【thisStudentId】："+thisStudentId)
                                    分子 = 0
                                    分母 = 0
                                    GPA = 0
                                    j=0
                                }
                                // 是同一个学生。
                                // console.log("当前学生的分数："+showData[i].subjectsScore)
                                // console.log("当前科目名：" + showData[i].courseName)
                                //
                                // console.log("当前科目名："+courseList[j].courseName)
                                // console.log("当前科目学分："+courseList[j].credits)
                                try {
                                    // 该学生的 科目成绩*学分
                                    分子 += showData[i].subjectsScore*courseList[j].credits

                                } catch (e) {
                                    分子 += 0
                                }
                                try {
                                    // 当前科目的 学分
                                    分母 += courseList[j].credits
                                } catch (e) {
                                    分母 += 0
                                }


                            }
                            // 把最后一个学生的 GPA 给补上。
                            GPA = 分子/分母
                            // console.log("下标：" + k)
                            // 输出 GPA 保留两位小数，并进行四舍五入。
                            // option05Data.GPA[k] = GPA.toFixed(2)
                            option05Data.GPA[k] = toGPA(GPA.toFixed(2))

                            // 输出 GPA 保留两位小数，并进行四舍五入。
                            // console.log("当前学号："+thisStudentId)
                            // console.log("GPA : "+GPA.toFixed(2))




                            // option06Data。统计各个科目的及格率人数。
                            // 获取数据部分。【科目和分数】
                            let subjectAndCourseData = option04Data.data
                            // 优秀
                            let excellent = 0
                            // 良好
                            let good = 0
                            // 及格
                            let pass = 0
                            // 不及格
                            let notPass = 0

                            // console.log("当前数据部分")
                            // console.log(subjectAndCourseData)

                            // 获取当前科目。
                            for (i = 0; i < subjectAndCourseData.length; i++) {
                                // console.log("当前科目：" + subjectAndCourseData[i].name)
                                // console.log("当前分数列表：")
                                // console.log(subjectAndCourseData[i].data)
                                // 进行当前科目的分数统计。
                                for (j = 0; j <subjectAndCourseData[i].data.length; j++) {

                                    // 优秀
                                    if (subjectAndCourseData[i].data[j]>=90){
                                        excellent++
                                    }else if (subjectAndCourseData[i].data[j]>=75){
                                        good++
                                    }else if (subjectAndCourseData[i].data[j]>=60){
                                        pass++
                                    }else {
                                        notPass++
                                    }
                                }

                                // console.log("当前科目的人数情况：")
                                // console.log("优秀："+excellent)
                                // console.log("良好："+good)
                                // console.log("及格："+pass)
                                // console.log("不及格："+notPass)
                                // 科目、优秀人数，良好人数、及格人数、不及格人数
                                option06Data[i] = [subjectAndCourseData[i].name,excellent,good,pass,notPass]
                                // 恢复人数
                                excellent=0
                                good=0
                                pass=0
                                notPass=0


                            }





                            // option07Data。统计各个科目的通过情况。
                            // 当前科目 及格人数。
                            pass = 0
                            // 获取科目列表。
                            for (i = 0; i < subjectAndCourseData.length; i++) {
                                option07Data.subjectList[i] = subjectAndCourseData[i].name
                                option07Data.totalList[i] = subjectAndCourseData[i].data.length
                                // console.log("当前科目：" + subjectAndCourseData[i].name)
                                // console.log("当前科目总人数：" + subjectAndCourseData[i].data.length)
                                // 进行当前科目的分数统计。
                                for (j = 0; j < subjectAndCourseData[i].data.length; j++){
                                    // 获取通过人数。
                                    if (subjectAndCourseData[i].data[j] >= 60){
                                        pass++
                                    }
                                }
                                // console.log("通过人数：" + pass)
                                option07Data.passList[i] = pass
                                pass = 0
                            }

                            // 获取当前科目总人数。
                            // 获取当前科目总及格人数。





                            // option08Data。统计班级前十的同学的分数信息。
                            // 要进行数据筛选的数据。
                            let topData =  option04Data.data
                            // 学生的总分数、姓名、学号。
                            let stuScore = {totalList:[],stuNameList: [],stuIdList:[]}
                            // 从学生分数中，获取最高分的十个。
                            // 要求：低 --> 高
                            // 默认：低 --> 高
                            // 注意：是否需要对数组进行反转。
                            let top10 = []
                            let top10StuId = []
                            let top10StuName = []
                            // 临时变量
                            let sumScore = 0

                            // 1. 先求所有同学的总分 与 学号【只有下标】

                            // 获取当前学生的总分
                            for (i = 0; i < total; i++) {
                                // console.log("学号：" + i)
                                // console.log("数据筛选信息：")
                                // console.log(topData[i])
                                // 科目
                                for ( j = 0; j < topData.length; j++) {
                                    // console.log("当前科目名称："+topData[j].name)
                                    // console.log("当前学生的成绩：" + topData[j].data[i])
                                    sumScore += topData[j].data[i]
                                }
                                // 分数
                                stuScore.totalList[i] = sumScore.toFixed(2)
                                // 下标
                                stuScore.stuIdList[i] = i+1
                                // console.log("总分："+sumScore.toFixed(2))
                                // console.log("\n----------------")
                                sumScore = 0
                            }

                            // 从服务器回传的数据。
                            // console.log("学生信息：")
                            // console.log(t1res.data.data)

                            // 获取当前学生的姓名信息。
                            let stuInfo = t1res.data.data
                            // 当前学生
                            thisStudentId = ""
                            // 根据最高分的十位同学的下标来获取当前学生的姓名。
                            for (i = 0,j = 0; i < stuInfo.length; i++) {
                                // 获取字符串后两位。
                                // console.log("当前学生的学号：" + parseInt(stuInfo[i].studentId.substring(stuInfo[i].studentId.length-2)) )
                                // 如果学号相同则选择当前学生的学号的姓名。
                                if (stuInfo[i].studentId != thisStudentId){
                                    thisStudentId = stuInfo[i].studentId
                                    // console.log("当前学生的学号：" + stuInfo[i].studentId)
                                    // console.log("当前学生的姓名：" + stuInfo[i].studentName)
                                    stuScore.stuNameList[j++] = stuInfo[i].studentName
                                }
                            }


                            // console.log("学生的分数：")
                            // console.log(stuScore)

                            // console.log("-----------------------------------")
                            // 使用快速排序进行数组的升序遍历。
                            // console.log("排序前：")
                            // console.log(stuScore.stuIdList)
                            // console.log(stuScore.totalList)
                            // console.log(stuScore.stuNameList)
                            quick_sort(stuScore.totalList,stuScore.stuIdList,stuScore.stuNameList, 0, stuScore.totalList.length-1)
                            // console.log("排序后：")
                            // console.log(stuScore.stuIdList)
                            // console.log(stuScore.totalList)
                            // console.log(stuScore.stuNameList)
                            // console.log("-----------------------------------")


                            // 查看边界分数
                            // console.log(stuScore.totalList[stuScore.totalList.length-1])
                            // console.log(stuScore.totalList[stuScore.totalList.length-10])

                            // 学生总分的长度.
                            let length = stuScore.totalList.length
                            // 取最高分的十位同学。即最后十位的下标的同学
                            for (i = length-10,j=0; i < stuScore.totalList.length ; i++,j++) {
                                // 最高分的十位同学的总分数
                                top10[j]        = stuScore.totalList[i]
                                // 最高分的十位同学的学号【仅仅只有下标】
                                top10StuId[j]   = stuScore.stuIdList[i]
                                // 最高分的十位同学的姓名
                                top10StuName[j] = stuScore.stuNameList[i]
                            }
                            // console.log("获取到的前10位最该分的同学。")
                            // console.log(top10)
                            // console.log(top10StuId)
                            // console.log(top10StuName)



                            // 总分赋值。
                            option08Data.totalList   = top10
                            // 学生姓名赋值
                            option08Data.stuNameList = top10StuName

                            // 及格率 和 考勤 假表。
                            // 及格率表格。
                            option09Data = [
                                {value: 1048, name: '不及格'},
                                {value: 735, name: '及格'},
                                {value: 1048, name: '良好'},
                                {value: 735, name: '优秀'}
                            ]
                            // 考勤状态表格
                            option10Data = [

                                { value: 310, name: '优秀' },
                                { value: 310, name: '安全' },
                                { value: 251, name: '良好' },
                                { value: 147, name: '警示' },
                                { value: 102, name: '严重警示' }
                            ]


                            // 数据
                            // console.log("当前图标数据：")
                            // console.log(option00Data)
                            // console.log(option01Data)
                            // console.log(option02Data)
                            // // console.log(option03Data)   // 3和1是相同的指向。
                            // console.log(option04Data)
                            // console.log(option05Data)
                            // console.log(option06Data)
                            // console.log(option07Data)
                            // console.log(option08Data)
                        }
                        else {
                            // 重置数据表格。
                            option00Data = []
                            option01Data = []
                            option02Data = []
                            option03Data = []   // option01Data 与 option03Data 数据指向相同
                            // 科目列表。学号列表。数据部分。
                            option04Data = {subjectList:[],stuIdList:[],data:[]}
                            // 学号。GPA。
                            option05Data = {stuIdList:option04Data.stuIdList, GPA:[]}
                            // [ 科目、优秀人数、良好人数、及格人数、不及格人数 ]。
                            option06Data = []
                            // 科目、总人数、及格人数。
                            option07Data = {subjectList:[],totalList:[],passList:[]}
                            // 姓名列表、总分。【排序：低 --> 高】
                            option08Data = {stuNameList:[], totalList:[]}
                            option09Data = []
                            option10Data = []

                            // 该班级没有数据。
                            layer.msg("该班级没有数据：", {icon: 0});

                            return ;
                        }
                    });

                        // 班级名称
                    // console.log($("#className span").text() )
                    $("#className span").text(obj.title)
                    layer.open({
                        type: 3,
                        time: 2000
                    })
                    $(".layui-body").removeAttr("hidden")
                    // 显示页面
                    initPage()          // 初始化可视化表图
                    $.ajaxSettings.async = true;   //恢复异步执行
                    drawDiagramsList()  // 重新绘制
                    initTable(obj.id)   // 初始化表格
                    /**通过 ajax 请求获取数据，并写入。*/
                    // $.ajaxSettings.async = false;   //取消异步执行
                    // // $.getJSON("http://localhost:8080/getStudentsInfo", function (data) {
                    // $.getJSON(webUrl+studentsDataPrefix+"/getStudentsInfo", function (data) {
                    //     studentsData = data
                    // });
                    // $.ajaxSettings.async = true;   //恢复异步执行

                    // layer.msg('回调返回的参数已显示再控制台');
                }
            });
        });
    </script>
</body>
</html>




<!--
    需要获取的数据

    /**
     * 科目与男女比例    最高分 --- 条形图。
     * 数据部分：option00.dataset.source[i]['科目名称',男生人数，女生人数]
     */

    /**
     * 男女比例   ---  饼图。
     * 数据部分：option01.series[0].data[i].value    人数。（.name   性别）
     */

    /**
     * 科目与男女比例     最低分   ---    条形图
     * 数据部分：option02.dataset.source[i]['科目名称',男生人数，女生人数]
     */

    /**
     * 成绩总情况 --- 折线图
     * 科目名：         option04.legend.data []
     * 学号：          option04.xAxis.data []
     * 数据部分：
     *      科目名：    option04.series[i].name
     *      该科目所对应的学生学号的分数：option04.series[i].data  []
     */

    /**
     * GPA情况   ---   折线图
     * 学号：          option05.xAxis.data         []
     * 学生GPA情况：    option05.series[0].data     []
     */

    /**
     * 及格率人数统计图  --- 条形图
     * 数据部分：option06.dataset.source[i] ['高等数学','优秀人数','良好人数','及格人数','不及格人数']
     */

    /*各个科目的及格情况*/

    /*
     * 数据部分：
     * 科目数据：     option07.yAxis[0].data。
     * 该科目总人数：  seriesData1
     * 该科目通过人数：seriesData2
     *
     */

    /**
     * 总分前10位学生
     *
     * 姓名：  option08.yAxis.data         []
     * 分数：  option08.series[0].data     []
     */

    /**
     * 及格率  --- 饼图
     * 数据部分：    option09.series[0].data[i] [value:及格状态的人数, 及格状态]
     */

    /*考勤情况 饼图*/

    /*
     * 数据部分：
     *  提示信息数据：  option10.legend.data。
     *  班级数据：     option10.series[0].name。  // 动态的班级信息。
     *  浮块数据：     option10.series[0].data。
     *
     *  提示信息数据：  option10.series[0].data[i].name。
     *  信息数据：     option10.series[0].data[i].value。
     */
-->